<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">在线申请</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="form_box">
					<view class="title_box">
						<view class="title">承租人信息 </view>
						<view class="text">(必填)</view>
					</view>
					<view class="list">
						<view class="name">中文姓名</view>
						<input type="text" v-model="truename" placeholder="请输入中文姓名" placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">手机号码</view>
						<input type="text" v-model="phone" placeholder="请输入手机号码" placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">证件类型</view>
						<input disabled="true" type="text" value="身份证" placeholder="请输入"
							placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">证件号码</view>
						<input type="text" v-model="idcode" placeholder="请输入证件号码" placeholder-style="color:#B5B5B5" />
					</view>

					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="list">
							<view class="name">婚姻状况</view>
							<input disabled="true" type="text" value="" placeholder="请选择婚姻状况"
								placeholder-style="color:#B5B5B5" v-model="matrimony" />
							<view class="arrow iconfont icon-xiangyou1"></view>
						</view>
					</picker>

					<view class="list">
						<view class="name">户籍信息</view>
						<input type="text" v-model="acc" placeholder="请输入户籍信息" placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">现居住地址</view>
						<input type="text" v-model="now_addr" placeholder="请输入现居住地址" placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">职务/职称</view>
						<input type="text" v-model="job" placeholder="请输入职务/职称" placeholder-style="color:#B5B5B5" />
					</view>
					<view class="list">
						<view class="name">车辆租赁用途</view>
						<input type="text" v-model="order.use_for" placeholder="请输入车辆租赁用途" placeholder-style="color:#B5B5B5" />
					</view>
				</view>

				<view class="form_box">
					<view class="title_box">
						<view class="title">其他联系人 </view>
						<view class="text text02">(选填)</view>
					</view>
					<block v-for="(item,index) in connectionLIst" :key="index">
						<view class="list">
							<view class="name">姓名</view>
							<input type="text" v-model="item.name" placeholder="请输入联系人姓名"
								placeholder-style="color:#B5B5B5" />
						</view>
						<view class="list">
							<view class="name">联系电话</view>
							<input type="text" v-model="item.phone" placeholder="请输入联系电话"
								placeholder-style="color:#B5B5B5" />
						</view>
					</block>
					<view class="more" @tap="addList">
						<view class="icon iconfont icon-jiahao2fill"></view>
						<view class="text">添加其他联系人</view>
					</view>
				</view>

				<view class="clear_box03"></view>
				<view class="confirm" :data-url="'/pages/personalcenter/car/bind_car'" @click="to_step1">下一步</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {mapState} from 'vuex';
    import helper from '@/common/helper';
	export default {
		data() {
			return {
				order_id : 0,
				order : [],
				index:0,
				array: ['未婚', '已婚'],
				matrimony:'',
				page: 1,
				scrrol: false,
				info: '',
				
				truename: '',
				phone : '',
				idcode : '',
				now_addr: '',
				acc : '',
				job : '',
				order:{
					use_for : ''
				},
				connectionLIst: [{
					name: '',
					phone: '',
				}]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(opt) {
			 this.order_id = opt.order_id||0;
             this.initData();
		},
		methods: {
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value;
				this.userInfo.is_marry = e.detail.value;
				this.matrimony = this.array[e.detail.value];
			},
			initData(){
				this.truename = this.userInfo.truename;
				this.phone = this.userInfo.phone;
				this.idcode = this.userInfo.idcode;
				this.now_addr = this.userInfo.now_addr;
				this.acc = this.userInfo.acc;
				this.job = this.userInfo.job;
				if(this.userInfo.is_marry){
					this.matrimony = '已婚';
				}else{
					this.matrimony = '未婚';
				}
				if(this.order_id > 0){
					let url = this.site_url + 'api/auth/order/loans_order_detail?id='+this.order_id;
					this.areq(url).then(res=>{
						if(res.code == 1){
							 //todo
						     this.order = res.data;
							 if(this.order.link_list.length > 0){
								  this.connectionLIst = this.order.link_list;
							 }
						}
						
					})
					
					
				}
				
				
			},
			addList() {
				let that = this;
				that.connectionLIst.push({
					name: '',
					phone: '',
				});
			},
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			to_step1(e){
				
				let url = e.currentTarget.dataset.url;
				
				try{
					if(!this.truename || !this.phone || !this.idcode || !this.now_addr || !this.acc || !this.job){
						throw '请完善信息';
					}
					if(!helper.check_mobile(this.phone)){
						throw '手机格式错误';
					}
					if(this.order.use_for == ''){
						throw '请填写车辆租赁用途';
					}
					this.connectionLIst.forEach(vo=>{
						if(vo.name == ''){
							throw '联系人名称不能为空';
						}
						if(!helper.check_mobile(vo.phone)){
							throw '联系人手机格式错误';
						}
					})
					
					let pre_loans_order = {
						order_id : this.order_id,
						truename : this.truename,
						phone : this.phone,
						now_addr : this.now_addr,
						idcode : this.idcode,
						acc : this.acc,
						job : this.job,
						use_for : this.order.use_for,
						is_marry : this.userInfo.is_marry,
						link_text :  JSON.stringify(this.connectionLIst),
					}
					uni.setStorageSync('pre_loans_order',pre_loans_order);
					this.$r(url);
					
				}catch(err){
					 this.showMsg(err);
				}
				
		
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		}
	}
	
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.form_box {
		width: 100%;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4vw;
		margin-bottom: 4%;
	}

	.form_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.form_box .title_box .title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-right: 1vw;
	}

	.form_box .title_box .text {
		font-size: 4.2vw;
		color: #FC5D20;
		font-weight: bold;
	}

	.form_box .title_box .text02 {
		color: #B5B5B5;
	}

	.form_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.form_box .list .name {
		font-size: 3.8vw;
		color: #333;
		margin-right: 4vw;
	}

	.form_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
	}

	.form_box .list .arrow {
		font-size: 3.5vw;
		color: #B5B5B5;
	}

	.form_box .more {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 4%;
	}

	.form_box .more .icon {
		font-size: 4.5vw;
		color: #FC5D20;
		margin-right: 1vw;
	}

	.form_box .more .text {
		font-size: 3.5vw;
		color: #FC5D20;
	}
</style>